var app = new Vue({
    el: "#app",
    data: {
        //列表数据
        entityList:[],
        //总记录数
        total: 0,
        //页大小
        pageSize: 10,
        //当前页号
        pageNum: 1,
        //实体
        entity:{pic:"",status:1},
        //查询实体
        searchEntity:{categoryId:0,article:""}
    },
    methods: {

        //上传图片文件
        uploadFile: function () {
            // 声明一个FormData对象
            var formData = new FormData();
            // file 这个名字要和后台获取文件的名字一样; querySelector获取选择器对应的第一个元素
            formData.append('file', document.querySelector('input[type=file]').files[0]);
            //post提交
            axios({
                url: '/upload.do',
                data: formData,
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(function (response) {
                if (response.data.success) {
                    //上传成功
                    app.entity.pic = response.data.message;
                } else {
                    //上传失败
                    alert(response.data.message);
                }
            })

        },
        searchList: function (curPage) {
            this.pageNum = curPage;
            this.searchEntity.categoryId = this.getParameterByName("categoryId");
            axios.post("../article/search.do?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize, this.searchEntity).then(function (response) {
                //this表示axios；所以使用app设置entityList的数据
                for (var i = 0; i < response.data.list; i++) {
                    response.data.list[i].article = response.data.list[i].article.substring(0,50);
                }
                app.entityList = response.data.list;

                app.total = response.data.total;
            });
        },
        //根据主键查询
        findOne: function (id) {
            axios.get("../article/findOne/" + id + ".do").then(function (response) {
                app.entity = response.data;
            });
        },
        //删除；方法名不能直接使用vue关键字delete
        deleteArticle: function (id) {
            if(confirm("确定要删除选中的记录吗？")){
                axios.get("../article/deleteArticle.do?id=" + id).then(function (response) {
                    if(response.data.success){
                        app.searchList(1);
                    } else {
                        alert(response.data.message);
                    }
                });
            }
        },
        //根据参数名字获取参数
        getParameterByName: function (name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
        }
    },
    created: function () {
        this.searchList(this.pageNum);
    }
});